<template>
  <el-table class="sa-table" :data="data" stripe>
    <template #empty>
      <sa-empty />
    </template>
    <el-table-column prop="id" label="ID" min-width="90" />
    <el-table-column label="订单号" min-width="260">
      <template #default="scope">
        {{ scope.row.order?.order_sn || scope.row.order_id }}
      </template>
    </el-table-column>
    <el-table-column label="下单用户" min-width="160">
      <template #default="scope">
        <sa-user-profile :user="scope.row.buyer" :id="scope.row.buyer_id" />
      </template>
    </el-table-column>
    <el-table-column label="分销用户" min-width="160">
      <template #default="scope">
        <sa-user-profile :user="scope.row.agent" :id="scope.row.agent_id" />
      </template>
    </el-table-column>
    <el-table-column label="分销金额" min-width="160" align="center">
      <template #default="scope"> {{ scope.row.commission }}元 </template>
    </el-table-column>
    <el-table-column label="入账状态" min-width="80">
      <template #default="scope">
        <span :class="`sa-color--${statusStyle[scope.row.status]}`">
          {{ scope.row.status_text }}
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="type_text" label="入账方式" min-width="80" align="center" />
    <el-table-column prop="commission_time" label="分佣时间" min-width="172" align="center" />
  </el-table>
</template>

<script setup>
  const props = defineProps(['data']);

  const statusStyle = {
    0: 'info',
    1: 'success',
    '-1': 'warning',
    '-2': 'danger',
  };
</script>
